<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>字符串综合</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-family:"微软雅黑";
        }
        p{
            margin:100px auto;
            padding:20px;
            width:400px;
            border:5px solid #808080;
            font-size:18px;
        }
        a{
            font-size:14px;
        }
        .btn{
            width:40px;
            height:25px;
            text-align:center;
            line-height:25px;
            border:1px solid #808080;
        }
        .btn{
            background:#dcdcdc;
            padding:5px;
            position:absolute;
            left:50%;              /*让元素居中写法*/
            margin-left:225px;
            top:100px;
            cursor:pointer;
        }
        #ChangeCard{
            width:300px;
            height:100px;
            padding:20px;
            border:5px solid #cd5c5c;
            position:absolute;
            left:50%;             /*让元素居中写法*/
            margin-left:-170px;
            top:300px;
            overflow:hidden;
            display:none;
        }
        .Change_div{
            float:left;
            width:40px;
            height:20px;
            text-align:center;
            line-height:20px;
            padding:5px;
            cursor:pointer;
        }
        .myChange{
            clear:left;
            border-top:2px solid #db7093;
            padding:20px;
        }
        input[type="text"]{
            display:inline-block;
            width:100px;
        }
    </style>
</head>
<body>
<p>
    <span>
        妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！
        2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……
    </span>
    <a href="javascript:;">>>收缩</a>
</p>
<div class="btn">查找</div>
<div class="btn" style="top:135px;">替换</div>
<div id="ChangeCard">
    <div class="Change_div">查找</div>
    <div class="Change_div">替换</div>
    <div class="myChange">
        <input class="myContent" type="text"/>
        <input class="do_btn" type="button" value="查找"/>
    </div>
    <div class="myChange">
        <input class="myContent" type="text"/>
        <input class="myContent" type="text"/>
        <input class="do_btn" type="button" value="替换"/>
    </div>
</div>
</body>
<script type="text/javascript">
    var oSpan=document.getElementsByTagName('span');
    var oA=document.getElementsByTagName('a');
    var btn=true;
    var oldContent=oSpan[0].innerHTML;
    oA[0].onclick=function(){//文本展开与收缩
        if(btn){
            oSpan[0].innerHTML=oldContent.substring(0,27)+"......";
            oA[0].innerHTML=">>展开";
        }else{
            oSpan[0].innerHTML=oldContent;
            oA[0].innerHTML=">>收缩";
        }
        btn=!btn;
    };
    var myDiv=document.getElementById("ChangeCard");
    var oBtn=document.getElementsByClassName("btn");
    var Change_div=document.getElementsByClassName("Change_div");
    oBtn[0].onclick =function(){//TMD,要照顾行为页面分离,坚持用原生写出来也是醉了
        myDiv.style.display="block";
        document.getElementsByClassName("Change_div")[0].style.background="#db7093";
        document.getElementsByClassName("Change_div")[1].style.background="#fff";
        document.getElementsByClassName("myChange")[0].style.display="block";
        document.getElementsByClassName("myChange")[1].style.display="none";
    };
    oBtn[1].onclick =function(){
        myDiv.style.display="block";
        document.getElementsByClassName("Change_div")[0].style.background="#fff";
        document.getElementsByClassName("Change_div")[1].style.background="#db7093";
        document.getElementsByClassName("myChange")[0].style.display="none";
        document.getElementsByClassName("myChange")[1].style.display="block";
    };
    Change_div[0].onclick=function(){
        document.getElementsByClassName("Change_div")[0].style.background="#db7093";
        document.getElementsByClassName("Change_div")[1].style.background="#fff";
        document.getElementsByClassName("myChange")[0].style.display="block";
        document.getElementsByClassName("myChange")[1].style.display="none";
    };
    Change_div[1].onclick=function(){
        document.getElementsByClassName("Change_div")[0].style.background="#fff";
        document.getElementsByClassName("Change_div")[1].style.background="#db7093";
        document.getElementsByClassName("myChange")[0].style.display="none";
        document.getElementsByClassName("myChange")[1].style.display="block";
    };
//    下面才是正餐
//    查找
    var do_btns=document.getElementsByClassName("do_btn");
    do_btns[0].onclick=function(){
        var str=/^\S+$/;
        var myContent=oSpan[0].innerHTML;
        var mySearch=document.getElementsByClassName("myContent")[0].value;
        if(str.test(mySearch)){
            if(myContent.split(mySearch).length==1){
                alert("没有找到");
                document.getElementsByClassName("myContent")[0].value="";//清空
                return false;
            }
            oSpan[0].innerHTML=myContent.split(mySearch).join("<span style='background:#ffff00;'>"+mySearch+"</span>");
            oldContent=oSpan[0].innerHTML;
            document.getElementsByClassName("myContent")[0].value="";//清空
        }else{
            alert("请输入查找内容");
        }
    };
//    替换
    do_btns[1].onclick=function(){
        var str=/^\S+$/;
        var myContent=oSpan[0].innerHTML;
        var myChange1=document.getElementsByClassName("myContent")[1].value;
        var myChange2=document.getElementsByClassName("myContent")[2].value;
        if(!str.test(myChange1)){
            alert("请输入要替换的内容");
            return false;
        }
        if(!str.test(myChange2)){
            if(confirm("确定要删除吗?")){
                oSpan[0].innerHTML=myContent.split(myChange1).join("<span style='background:orange;'>"+myChange2+"</span>");
                document.getElementsByClassName("myContent")[1].value="";//清空
                return false;
            }
        }
        oSpan[0].innerHTML=myContent.split(myChange1).join("<span style='background:orange;'>"+myChange2+"</span>");
        oldContent=oSpan[0].innerHTML;
        document.getElementsByClassName("myContent")[1].value="";//清空
        document.getElementsByClassName("myContent")[2].value="";
    };
</script>
</html>